<html>
<head>
    <style type="text/css">
        #playerBody {
            width: 400px;
            background-color: #9040d0;
            overflow: hidden;
            padding: 2px 2px 20px 2px;
        }
        
        #playerPlugin {
            border: 1px solid #000000; 
            display: inline-block;
            margin: 5px;
        }
        
        #playlist {
            border: 1px solid #ffffff;
            margin: 5px;
            width: 90%;
            border-collapse: collapse;
            empty-cells: show;
        }
        
        .playlistHeader {
            background-color: #d0d0d0;
            color: #505050;
            font-size: 90%;
        }
        
        .playlistHeader > th {
            border: 1px solid #ffffff;
        }
        
        .playlistRowEven {
            background-color: #a050e0;
        }
        
        .playlistRowOdd {
            background-color: #b060f0;
        }
        
        .playlistRowActive {
            background-color: #d060f0;
            font-style: italic;
        }
        
        .playlistRowEven > td, .playlistRowOdd > td, .playlistRowActive > td
        {
            border: 1px solid #ffffff;
        }
        
        #fileInput {
            margin: 2px;
        }
        
        .button {
            border: 1px outset #8080f0;
            padding: 1px 7px 1px 7px;
            background-color: #8080f0;
            color: #000000;
            text-decoration: none;
        }
    </style>

    <script type="text/JavaScript">
        var player;
        var fileInput;
        var playlist;
        
        function $(name)
        {
            return document.getElementById(name);
        }

        function addEvent(obj, name, func)
        {
            if (window.addEventListener) {
                obj.addEventListener(name, func, false); 
            } else {
                //alert("obj.attachEvent('on"+name+"', func);");
                obj.attachEvent("on"+name, func);
            }
        }
        
        function load()
        {
            player    = $('player');
            fileInput = $('fileField');
            playlist  = $('playlist');
            
            addEvent(player, "playlistChanged",    onPlaylistChanged);
            addEvent(player, "currentItemChanged", onCurrentItemChanged);
        }
        
        function addFile()
        {
            player.addItem(fileInput.value);
        }
        
        function addRow(idx, file, active)
        {
            var row = playlist.insertRow(idx+1);
            var cellNo     = row.insertCell(0)
            var cellFile   = row.insertCell(1);
            var cellRemove = row.insertCell(2);            
        
            var cellClass = active ?
                    "playlistRowActive" :
                    (idx % 2) ? "playlistRowEven" : "playlistRowOdd";
            cellNo    .setAttribute("class", cellClass);
            cellFile  .setAttribute("class", cellClass);
            cellRemove.setAttribute("class", cellClass);
            
            cellNo  .appendChild(document.createTextNode(active ? ('>'+(idx+1)) : (idx+1)));
            cellFile.appendChild(document.createTextNode(elem));
            
            var remove = document.createElement('a');
            remove.appendChild(document.createTextNode('x'));
            cellRemove.appendChild(remove);
            remove.setAttribute('href', '#');
            remove.setAttribute('onclick', 'javascript:player.removeItem('+idx+'); return false;');
        }
        
        function onPlaylistChanged(files, currentIndex)
        {
            //alert(files);
            //alert(currentIndex);
            var rows = playlist.rows.length;
            for(i=1; i<rows; ++i) {
                playlist.deleteRow(1);
            }
            
            var current = player.currentIndex;
        
            for (var index = 0; index < files.length; index++) {
                elem = files[index];
                var count = playlist.rows.length;
                addRow (index, elem, (index == current));
            };
        }
        
        function onCurrentItemChanged(index)
        {
            onPlaylistChanged(player.playlist, index);
        }
    </script>
</head>
<body onload="load()">
    <div id="playerBody">
        <div id="playerPlugin">
            <object id="player" type="application/x-vnd.FBBasicMediaPlayer"
                   width="300" height="200"></object>
        </div>
        <br/>
        
        <a class="button" href="#" onclick="javascript:player.previous()">|&lt;&lt;</a>
        <a class="button" href="#" onclick="javascript:player.play()">&gt;</a>
        <a class="button" href="#" onclick="javascript:player.stop()">[]</a>
        <a class="button" href="#" onclick="javascript:player.next()">&gt;&gt;|</a>
        
        <table id="playlist">
            <tr class="playlistHeader">
                <th>#</th>
                <th>file</th>
                <th></th>
            </tr>
        </table>
            
        <form name="fileInput" style="width:1px; height:1px;">
            <table>
                <tr>
                    <td><input type="text" name="file" id="fileField" size="50"></td>
                    <td><a class="button" href="javascript:addFile()">add</a></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
